<template>
<div>
  <AppHeader></AppHeader>
  <div class="form">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label-width="110px" size="medium" label="所在区域">
        <el-cascader
            size="large"
            :options="options"
            v-model="selectedOptions"
            @change="handleChange"
        >
        </el-cascader>
      </el-form-item>
      <el-form-item label-width="110px" size="medium" label="新增确诊">
        <el-input v-model="form.addnumber"></el-input>
      </el-form-item>
      <el-form-item label-width="110px" size="medium" label="新增死亡">
        <el-input v-model="form.add_die"></el-input>
      </el-form-item>
      <el-form-item label-width="110px" size="medium"  label="新增无症状">
        <el-input v-model="form.addnosym"></el-input>
      </el-form-item>
      <el-form-item label-width="110px" size="medium"  label="新增密切接触者">
        <el-input v-model="form.addtouch"></el-input>
      </el-form-item>

<!--      <el-form-item label="选择区域">-->
<!--        <el-select v-model="form.region" placeholder="请选择所在区域">-->
<!--          <el-option label="区域一" value="shanghai"></el-option>-->
<!--          <el-option label="区域二" value="beijing"></el-option>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label-width="110px" size="medium"  label="填报时间">
        <el-col :span="15">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.date" format="yyyy 年 MM 月 dd 日"
                          value-format="yyyy-MM-dd" style="width: 100%;"></el-date-picker>
        </el-col>
<!--        <el-col class="line" :span="2">-</el-col>-->
<!--        <el-col :span="11">-->
<!--          <el-time-picker placeholder="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>-->
<!--        </el-col>-->
      </el-form-item>
<!--      <el-form-item label="即时配送">-->
<!--        <el-switch v-model="form.delivery"></el-switch>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="活动性质">-->
<!--        <el-checkbox-group v-model="form.type">-->
<!--          <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>-->
<!--          <el-checkbox label="地推活动" name="type"></el-checkbox>-->
<!--          <el-checkbox label="线下主题活动" name="type"></el-checkbox>-->
<!--          <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>-->
<!--        </el-checkbox-group>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="特殊资源">-->
<!--        <el-radio-group v-model="form.resource">-->
<!--          <el-radio label="线上品牌商赞助"></el-radio>-->
<!--          <el-radio label="线下场地免费"></el-radio>-->
<!--        </el-radio-group>-->
<!--      </el-form-item>-->
      <el-form-item label-width="110px" size="medium" label="其他情况">
        <el-input type="textarea" v-model="form.descinfor"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">立即提交</el-button>
        <el-button @click="reset">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</div>
</template>

<script>
import AppHeader from "@/components/AppHeader.vue";
import {addProvinceData} from "@/request";
import { regionData, CodeToText } from "element-china-area-data";
export default {
  name: "addProvinceData",
  components:{
    AppHeader
  },
  data(){
    return{
      form: {
        area:'',  //所在区域
        addnumber:'', //新增确诊
        add_die:'',  //新增死亡
        addtouch:'', //新增无症状
        addnosym:'', //新增无症状
        date: '',
        descinfor:'',
        // name: '',
        // region: '',
        // delivery: false,
        // type: [],
        // resource: '',
        // date2: '', //暂时不存入数据库
      },
      options: regionData, //非表单数据
      selectedOptions: [],  //选择区域
    }
  },
  methods: {
    onSubmit() {
      addProvinceData(this.form)
          .then((res)=>{
            console.log("输出数据：" + res.data.data)
            console.log("输出数据：" + res.data.msg)
            console.log("输出数据：" + res.data.code)
            if(res.data.code===200){
              this.$message({
                message:"省级疫情数据填报成功",
                type:"success",
                showClose:true
              })
            }else{
              this.$message({
                message:"省级疫情数据填报失败",
                type:"error",
                showClose:true
              })
            }
          })
          .catch((err)=>{
            this.$message({
              message: `${err}`,
              type: "error",
              showClose:true
            })
          })
      // console.log('submit!');
      console.log("form数据==》",this.form)
      this.form='' //提交后清空数据
      // let dateTime=`${this.form.date1.getFullYear()}-${this.form.date1.getMonth()}-${this.form.date1.getDay()}`
      // console.log("日期数据==》",dateTime)
      // let dateTime1=``
    },
    reset(){
      this.form={}
    },
    handleChange() {
      var loc = "";
      this.form.area=CodeToText[this.selectedOptions[0]];
      for (let i = 0; i < this.selectedOptions.length; i++) {
        loc += CodeToText[this.selectedOptions[i]];
      }
      // alert(loc)
      console.log("输出loc数据===》",loc)
      // alert(loc);
    //   this.$alert('请再次确认当前区域选择','系统消息',{
    //     confirmButtonText:'确定',
    //     callback:action=>{
    //       this.
    //     }
    //   })
    },
  }
}
</script>

<style scoped>
.form {
  width: 500px;
  margin-top: 40px;
  margin-left: 40px;
}
.el-cascader{
  width: 100%;
}

</style>